import { getExamList, selectExamList } from "@/store/slice/subject";
import "./index.scss";
import { Table } from "antd";
import type { TableProps } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { useAppDispatch } from "@/app/hooks";
import { examListBody } from "@/util/request";

const columns: TableProps<examListBody>["columns"] = [
	{
		title: "序号",
		dataIndex: "index",
		key: "_id",
		render: (_, __, index) => <div>{index + 1}</div>,
	},
	{
		title: "考试类型",
		dataIndex: "subject_name",
		key: "_id",
	},
	{
		title: "考试时间",
		dataIndex: "created",
		key: "_id",
		render: (_, { created }) => {
			const formattedDateString = formattedDate(created);
			return formattedDateString;
		},
	},
	{
		key: "_id",
		dataIndex: "is_judge",
		title: "状态",
		render: (_, { is_judge }) => (
			<div className="table_status">
				<div className={is_judge ? "grey" : "red"}></div>
				<span>{is_judge ? "已阅卷" : "未阅卷"}</span>
			</div>
		),
	},
	{
		title: "操作",
		dataIndex: "",
		key: "x",
		render: (_, { is_judge }) => (
			<div className={is_judge ? "btn" : "btn active"}>查看</div>
		),
	},
];
function formattedDate(isoDateString: Date) {
	const date = new Date(isoDateString);
	const year = date.getUTCFullYear(); // 获取年份
	const month = date.getUTCMonth() + 1; // 获取月份，注意月份是从0开始的
	const day = date.getUTCDate(); // 获取日期
	const formattedMonth = month.toString().padStart(2, "0"); // 确保月份是两位数
	const formattedDay = day.toString().padStart(2, "0"); // 确保日期是两位数
	return `${year}-${formattedMonth}-${formattedDay}`;
}
function ExamHistory() {
	const dispatch = useAppDispatch();
	const data = useSelector(selectExamList);

	useEffect(() => {
		dispatch(getExamList());
	}, []);
	return (
		<div className="examHistory_wrap">
			<Table
				columns={columns}
				dataSource={data}
				rowKey={(row: examListBody) => row._id}
			/>
		</div>
	);
}

export default ExamHistory;
